<template>
    <div>
        <Header />
        <div class="resourceWrapper">
            <div class="bannerWrapper">
                <img class="bannerImg" src="@/assets/img/straight_banner.jpg" alt="">
                <div class="mapNav">
                    <div class="indexContainer">
                        <img style="width: 12px; height: 15px" src="@/assets/images/industryNews30.png"
                            object-fit="contain" />
                        <span class="mapCurrent">当前位置：</span>
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item>直营专项</el-breadcrumb-item>
                            <el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>

                </div>
            </div>
            <div class="indexContainer">
                <div class="resContent">
                    <el-row :gutter="12">
                        <el-col :xs="24" :sm="24" :md="6" :lg="4" :xl="4">
                            <div style="position: sticky;top:0;left:0">
                                <div class="leftMenu">
                                    <h2>直营专项</h2>
                                    <p>Direct Sales Initiative</p>
                                </div>
                                <div>
                                    <ul>
                                        <li v-for="(item, index) in ['数据资源', '咨询能力', '产品能力', '开发治理能力']" :key="index"
                                            style="margin: 20px 0 0 8px;border-bottom: 1px dashed #ccc;padding-bottom: 20px;width: 194px;cursor: pointer;"
                                            @click="handleMenu(index)">
                                            <template v-if="menuIndex == index">
                                                <img style="width: 7px; height: 12px"
                                                    src="@/assets/images/industryNews3.png" object-fit="contain" />
                                            </template>
                                            <template v-else>
                                                <img style="width: 7px; height: 12px"
                                                    src="@/assets/images/industryNews2.png" object-fit="contain" />
                                            </template>
                                            <span
                                                :style="{ 'font-size': '18px', color: menuIndex == index ? '#2468f2' : '#999', 'margin-left': '10px' }">{{
                                                    item }}</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </el-col>
                        <el-col :xs="24" :sm="24" :md="6" :lg="20" :xl="20">
                            <div class="resRight">
                                <h3 v-if="menuIndex == 0" class="data">数据资源</h3>
                                <h3 v-if="menuIndex == 1" class="guidance">咨询能力</h3>
                                <h3 v-if="menuIndex == 2" class="product">产品能力</h3>
                                <h3 v-if="menuIndex == 3" class="governance">开发治理能力</h3>
                            </div>
                            <img src="@/assets/img/circle_line.png" alt="">
                            <!-- 数据资源内容 -->
                            <div v-if="menuIndex == 0">
                                <el-tabs v-model="activeName">
                                    <el-tab-pane label="专项介绍" name="1"></el-tab-pane>
                                    <el-tab-pane label="资源列表" name="2"></el-tab-pane>
                                </el-tabs>
                                <div class="descContent" v-if="activeName == '1'">
                                    <p v-html="infoContent"></p>
                                </div>
                                <!-- 资源列表 -->
                                <div v-if="activeName == '2'">
                                    <div class="directSearch">
                                        <div class="searchTop">
                                            <div class="searchTitle">
                                                <span class="themeGradientColor"></span>
                                                <h3>筛选条件</h3>
                                            </div>
                                            <el-row :gutter="10">
                                                <el-col :xs="24" :sm="24" :md="2" :lg="2" :xl="2">适用行业：
                                                </el-col>
                                                <el-col :xs="24" :sm="24" :md="2" :lg="22" :xl="22">
                                                    <el-checkbox-group v-model="checkList" @change="changeSelect">
                                                        <!-- <el-checkbox 
                                                            class="checkbox-container" label="-1">全部</el-checkbox> -->
                                                        <el-tooltip v-for="item in industryData" :key="item.id" class="item" effect="dark" :content="item.label"
                                                            placement="top">
                                                            <el-checkbox 
                                                                class="checkbox-container" :label="item.value">{{ item.label
                                                                }}</el-checkbox>
                                                        </el-tooltip>

                                                    </el-checkbox-group>
                                                </el-col>
                                            </el-row>
                                        </div>
                                        <div class="searchBottom">
                                            <el-row>
                                                <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                                                    <div style="display: flex;align-items: center;">
                                                        <div class="searcItem"
                                                            :class="tabIndex == 0 ? 'click_active' : 'searcItem'"
                                                            @click="handleTab(0)">
                                                            <span>发布时间 </span>
                                                            <img width="7" src="@/assets/images/industryNews32.png" />
                                                        </div>
                                                        <el-divider direction="vertical"></el-divider>
                                                        <div class="searcItem" @click="handleTab(1)"
                                                            :class="tabIndex == 1 ? 'click_active' : 'searcItem'">
                                                            <span>浏览量 </span>
                                                            <img width="7" src="@/assets/images/industryNews32.png" />
                                                        </div>
                                                    </div>
                                                </el-col>
                                                <el-col :xs="24" :sm="24" :md="6" :lg="18" :xl="18">
                                                    <el-form :inline="true" size="mini" :model="params"
                                                        class="demo-form-inline">
                                                        <el-form-item label="有效期">
                                                            <el-date-picker v-model="params.dateVal" type="datetimerange"
                                                                value-format="yyyy-MM-dd HH:mm:ss" range-separator="至"
                                                                @input="changeDate" start-placeholder="开始日期"
                                                                end-placeholder="结束日期">
                                                            </el-date-picker>
                                                        </el-form-item>
                                                        <el-form-item label="资源名称">
                                                            <el-input v-model="params.title" placeholder="资源名称"></el-input>
                                                        </el-form-item>
                                                        <div class="optionsBtn">
                                                            <el-button class="themeGradientColor searchBtn" size="mini"
                                                                type="primary" @click="onSearch"
                                                                icon="el-icon-search"></el-button>
                                                            <img class="onReset" style="width: 75px;height: 29px;"
                                                                @click="onReset" src="@/assets/images/industryNews33.png" />
                                                        </div>
                                                    </el-form>

                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                    <div class="resourceList" v-loading="loading">
                                        <el-empty v-if="resourceData.length == 0" description="暂无数据"></el-empty>
                                        <el-row :gutter="10">
                                            <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="resourceMargin"
                                                v-for="item in resourceData" :key="item.id">
                                                <div class="resourceItem" @click="handleDetail(item.id)">
                                                    <div class="resourceMain">
                                                        <p class="singleLine resourceTitle">{{ item.title }}</p>
                                                        <p class="moreLineThree resourceDesc">
                                                            {{ item.summarize }}</p>
                                                        <p class="sendDate"><span>适用行业：</span>{{ czyFormat(item.industry) }}
                                                        </p>
                                                        <p class="sendDate"><span>发布日期：</span>{{ item.auditTime }}</p>
                                                        <p class="resourceDate">有效期：</p>
                                                        <div class="dateRange">
                                                            <p class="rangeItem">
                                                                <i class="el-icon-date dateIcon"></i>
                                                                <span>{{ item.startTime.slice(0, 10) }}</span>
                                                            </p>
                                                            <p class="rangeLine">-</p>
                                                            <p class="rangeItem">
                                                                <i class="el-icon-date dateIcon"></i>
                                                                <span>{{ item.endTime.slice(0, 10) }}</span>
                                                            </p>
                                                        </div>
                                                        <div class="userReource">
                                                            <p class="userImgInfo">
                                                                <!-- <img :src="item.avatar" alt=""> -->
                                                                <span>供应商：{{ item.supplier }}</span>
                                                            </p>
                                                            <p class="userView">
                                                                <i class="el-icon-view"></i>
                                                                <span>{{ item.readRecord }}</span>
                                                            </p>
                                                        </div>

                                                    </div>
                                                    <p class="resourceOnline">
                                                        查看详情
                                                    </p>
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </div>
                                    <!-- 分页 -->
                                    <div class="poolPage">
                                        <el-pagination background @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange" :current-page="params.page"
                                            :page-sizes="[10, 20, 30]" :page-size="params.pageSize"
                                            layout="total, prev, pager, next" :total="total">
                                        </el-pagination>
                                    </div>
                                </div>

                            </div>
                            <!-- 咨询能力\产品能力、开发治理能力 -->
                            <div class="specialContent" v-if="menuIndex == 1 || menuIndex == 2 || menuIndex == 3">
                                <div class="specialOne">
                                    <h3 class="specialName">专项介绍</h3>
                                </div>
                                <div class="descContent">
                                    <p v-html="infoContent"></p>
                                </div>
                            </div>

                        </el-col>
                    </el-row>

                </div>

            </div>
        </div>
        <Footer />
        <!-- 聊天 -->
        <OnlineList ref="onlineContent" />
        <!-- 市场资源发布表单 -->
        <FormDialog ref="market" />
        <!-- 数据资源发布表单 -->
        <FormDialog2 ref="data" />
        <!-- 产品资源发布表单 -->
        <FormDialog3 ref="product" />
    </div>
</template>
<script>
import { operatedContent, operatedResource } from "@/request/api/operated"
import Header from "@/components/home/header/header";
import Footer from "@/components/home/footer/footer";
import OnlineList from "@/components/personalCenter/onlineList/onlineList"
import FormDialog from "@/view/personalCenter/resourceShare/marketResource/marketForm"
import FormDialog2 from "@/view/personalCenter/resourceShare/dataResource/marketForm"
import FormDialog3 from "@/view/personalCenter/resourceShare/productResource/marketForm"
import { keyVal } from "@/request/api/link"
export default {
    components: {
        Header,
        Footer,
        OnlineList,
        FormDialog,
        FormDialog2,
        FormDialog3
    },
    data() {
        return {
            loading: true,
            menuIndex: 0,
            activeName: '1',
            params: {
                page: 1,
                pageSize: 6,
                auditStatus: '1',
                industry: '',//适用行业
                title: '',//资源名称
                readRecord: '',//浏览量排序(0倒序1正序)
                status: '0',//发布时间(0倒叙 1正序)
                startTime: null,//开始时间
                endTime: null//结束时间
            },
            resourceData: [],
            total: 0,
            name: '数据资源',
            contentParams: {
                articleType: '0',//文章类型(0数据资源 1咨询能力 2产品能力 3开发治理能力)
                auditStatus: '1',//审核状态(0待审核 1审核通过 2审核驳回 3下架 4草稿)
            },
            infoContent: '',
            industryData: [],
            checkList: ['-1'],
            tabIndex: 0
        }
    },
    created() {
        this.getList()
        this.getContent()
        this.getIndustryType()
    },
    methods: {
        // 点击菜单
        handleMenu(index) {
            this.menuIndex = index
            this.loading = true
            if (this.menuIndex == 0) {//数据资源
                this.name = '数据资源'
                this.contentParams.articleType = '0'
                this.getContent()
            } else if (this.menuIndex == 1) {//咨询能力
                this.name = '咨询能力'
                this.contentParams.articleType = '1'
                this.getContent()
            } else if (this.menuIndex == 2) {//产品能力
                this.name = '产品能力'
                this.contentParams.articleType = '2'
                this.getContent()
            } else if (this.menuIndex == 3) {//开发治理能力
                this.name = '开发治理能力'
                this.contentParams.articleType = '3'
                this.getContent()
            }
        },
        // 点击供需
        handleClick(val) {
            // this.loading = true
            // let name = val.name
            // if (name == '1') {//资源需求
            //     this.params.supplyDemand = '0'
            //     this.getList()
            // } else if (name == '2') {//资源供给
            //     this.params.supplyDemand = '1'
            //     this.getList()
            // }
        },
        // 获取数据资源-资源列表
        getList() {
            operatedResource(this.params).then(res => {
                console.log(res, '列表')
                this.loading = false
                if (res.data.code == 200) {
                    this.resourceData = res.data.result.items
                    this.total = res.data.result.total
                } else {
                    this.resourceData = []
                }
            })
        },
        handleSizeChange(val) {
            this.params.pageSize = val;
            this.params.page = 1;
            this.getList();
        },
        handleCurrentChange(val) {
            this.params.page = val;
            this.getList();
        },
        // 详情
        handleDetail(id) {
            this.$router.push({
                name: "directDetail",
                query: {
                    id,
                },
            });
        },
        //查看内容介绍
        getContent() {
            operatedContent(this.contentParams).then(res => {
                this.loading = false
                if (res.data.code == 200) {
                    this.infoContent = res.data.result.items[0].text
                    console.log(this.infoContent)
                }
            })
        },
        // 获取适用行业
        getIndustryType() {
            keyVal('applicable_industry ').then(res => {
                if (res.data.code === 200) {
                    this.industryData = res.data.result.items
                }
            })
        },
        czyFormat(row) {
            var name = "";
            this.industryData.forEach(function (item, index) {
                if (row == item.value) {
                    name = item.label;
                }
            });
            return name;
        },
        handleTab(index) {
            this.tabIndex = index
            if (this.tabIndex == 0) {
                this.params.status = '0'
                this.params.readRecord = null
            } else if (this.tabIndex == 1) {
                this.params.status = null
                this.params.readRecord = '0'
            }
            this.page = 1
            this.getList()
        },
        // 查询
        onSearch() {
            this.page = 1
            delete this.params.dateVal
            if (this.checkList.length !== 0) {
                this.params.industry = this.checkList.toString()
            }
            this.getList()
        },
        // 重置
        onReset() {
            let params = {
                page: 1,
                pageSize: 6,
                auditStatus: '1',
                industry: null,//适用行业
                title: null,//资源名称
                readRecord: null,//浏览量排序(0倒序1正序)
                status: '0',//发布时间(0倒叙 1正序)
                startTime: null,//开始时间
                endTime: null//结束时间
            }
            this.checkList = []
            this.params = params
            this.page = 1
            this.getList()
        },
        changeDate(val) {
            this.params.startTime = val[0]
            this.params.endTime = val[1]
        },
        //选择
        changeSelect(val) {
            console.log(val)
            // var index = val.indexOf('-1')
            // if(index!== -1){
            //     this.checkList=['-1']
            // }
        },
    }
}
</script>
<style lang="less" scoped>
@import "./directOperated.less";
</style>
<style>
.descContent p {
    color: #333 !important;
    line-height: 30px;
    word-break: break-all;
}
</style>

